<template>
  <div id="yoso">
    <el-form ref="form" :model="photo" label-width="80px">
      <el-form-item label="序号">
        <el-input v-model="photo.p_id"></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="photo.p_name"></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <img :src="photo.p_path" width="50px">
        <el-upload ref="upload" name="photo" action="" :auto-upload="false"
                   accept=".png,.jpg,.gif" :on-change="handleChange"
                   :file-list="fileList" :http-request="httpRequest"
        >
          <el-button type="primary" size="small">点击上传</el-button>
          <span slot="tip">.png,.jpg,.gif</span>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {

    name: "HotWordAdd",
    data(){
      return{
        admin:{},
        fileList:[],
        file:[],
        photo:{
          hw_name:'',
          hw_path:''
        }
      }
    },
    methods:{
      handleChange(file){
        this.fileList.splice(0,this.fileList.length)
        this.photo.p_path=URL.createObjectURL(file.raw)
        this.fileList[0]=file;
      },
      httpRequest(param){
        this.file.push(param.file)
      },
      onSubmit(){
        var formData = new FormData();
        this.$refs.upload.submit();
        this.file.forEach(function(file){
          formData.append('photo',file,file.name);
        });
        Object.keys(this.photo).forEach(key=>{
          formData.append(key,this.photo[key])
        });
        this.$axios.post('/PhotoServlet/update',formData)
        this.$router.push('/lunbo/photo')

      }
    },
    created() {
      this.$axios.get('PhotoServlet/findById?p_id='+ this.$route.params.id)
        .then(resp=>{
          this.photo = resp.data;
        })
    }
  }
</script>

<style scoped>

</style>
